<template>
  <div class="celiang">
    <el-tabs :tab-position="'left'" @tab-click="handleClick">
      <el-tab-pane
        v-for="item in tabsData"
        :label="item.label"
        :key="item.label"
      >
        <div class="tableContainer">
          <div class="top">
            <el-form :inline="true" class="demo-form-inline">
              <el-form-item
                :label="item.label"
                v-for="(item, index) in searchLabel"
                :key="index"
              >
                <el-select
                  v-if="item.options"
                  size="small"
                  v-model="item.bindData"
                  placeholder="请选择"
                  @change="typeChangeSelect"
                  clearable
                >
                  <el-option
                    :label="item2.label"
                    :value="item2.value"
                    v-for="(item2, index2) in item.options"
                  >
                  </el-option>
                </el-select>
                <el-date-picker
                  v-else-if="item.type == 'date'"
                  v-model="item.bindData"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  align="right"
                  :default-time="[
                    new Date(2000, 1, 1, 0, 0, 0).toLocaleString(),
                    new Date(2000, 1, 1, 23, 59, 59).toLocaleString(),
                  ]"
                >
                </el-date-picker>
                <el-input
                  v-else
                  size="small"
                  v-model="item.bindData"
                  placeholder="请输入"
                  clearable
                >
                </el-input>
              </el-form-item>
              <!-- <el-form-item
                :label="item.label"
                v-for="(item, index) in searchLabel"
                :key="index"
              >
                <el-input
                  size="small"
                  v-model="item.bindData"
                  placeholder="请输入"
                  clearable
                >
                </el-input>
              </el-form-item> -->
              <el-form-item>
                <el-button size="small" type="primary" @click="onSubmit"
                  >查询</el-button
                >
                <el-button
                  size="small"
                  @click="onReset"
                  style="background-color: #061f41; color: #dee1e6"
                  >重置</el-button
                >
                <el-button
                  v-if="tabLabel == '水文报告'"
                  size="small"
                  type="warning"
                  @click="feileiFn"
                  >分类管理</el-button
                >
              </el-form-item>
              <el-form-item style="float: right">
                <el-button size="small" @click="tableSetFn" type="primary"
                  >表格设置</el-button
                >
              </el-form-item>
              <el-form-item
                style="float: right"
                v-if="tabLabel == '水文报告' || tabLabel == 'Q-S曲线'"
              >
                <el-button size="small" @click="addFn" type="primary"
                  >新增数据</el-button
                >
              </el-form-item>
              <el-form-item
                style="float: right"
                v-if="
                  tabLabel == '成果台账' ||
                  tabLabel == '探放水工程量台账' ||
                  tabLabel == '水文钻孔排查台账'
                "
              >
                <el-button
                  size="small"
                  @click="exportFn('quanbu')"
                  type="success"
                  >导出全部</el-button
                >
              </el-form-item>
              <el-form-item
                style="float: right"
                v-if="
                  tabLabel == '成果台账' ||
                  tabLabel == '探放水工程量台账' ||
                  tabLabel == '水文钻孔排查台账'
                "
              >
                <el-button
                  size="small"
                  @click="exportFn('danqian')"
                  type="success"
                  >导出当前页</el-button
                >
              </el-form-item>
              <el-form-item
                style="float: right"
                v-if="
                  tabLabel != '水文报告' &&
                  tabLabel != '水文长观孔历史数据' &&
                  tabLabel != '涌水量历史数据' &&
                  tabLabel != '降雨量历史数据' &&
                  tabLabel != '水质检测历史数据' &&
                  tabLabel != 'Q-S曲线'
                "
              >
                <el-button size="small" @click="importFn" type="success"
                  >导入</el-button
                >
              </el-form-item>
              <el-form-item
                style="float: right"
                v-if="
                  tabLabel != '水文报告' &&
                  tabLabel != '水文长观孔历史数据' &&
                  tabLabel != '涌水量历史数据' &&
                  tabLabel != '降雨量历史数据' &&
                  tabLabel != '水质检测历史数据'
                "
              >
                <el-button size="small" @click="downloadFn" type="success"
                  >下载模版</el-button
                >
              </el-form-item>
              <el-form-item v-if="tabLabel == '成果台账' || tabLabel == '探放水工程量台账' || tabLabel == '水文钻孔排查台账'|| tabLabel == '水文报告' || tabLabel == 'Q-S曲线'" style="float: right">
                <el-button size="small" @click="delAllFn" type="danger"
                  >批量删除</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div class="bottom">
            <el-table
              :span-method="mergeHeader"
              :data="tableData"
              :cell-style="selectedCellStyle"
              style="width: 100%"
              @selection-change="handleSelectionChange"
              :height="tableData.length > 10 ? 546 : tableHeight"
            >
              <!-- height="560" -->
              <el-table-column
                type="selection"
                width="55"
                align="center"
              ></el-table-column>
              <el-table-column label="序号" type="index"> </el-table-column>
              <template v-for="(item, index) in tableHeaderShow">
                <el-table-column
                  v-if="item.child"
                  prop="name"
                  :label="item.title"
                  :width="item.width"
                  align="center"
                  show-overflow-tooltip
                >
                  <template>
                    <el-table-column
                      v-for="(item2, index2) in item.child"
                      :prop="item2.field"
                      :label="item2.title"
                      :key="index2"
                      :width="item2.width"
                      show-overflow-tooltip
                    ></el-table-column>
                  </template>
                </el-table-column>
                <el-table-column
                  v-else
                  :prop="item.field"
                  :label="item.title"
                  :key="index"
                  :width="item.width"
                  show-overflow-tooltip
                ></el-table-column>
              </template>

              <!-- <el-table-column
                  v-if="item.children"
                  prop="name"
                  :label="item.groupTitle"
                  :width="item.width"
                  align="center"
                  show-overflow-tooltip
                >
                  <el-table-column
                    :prop="item2.field"
                    :label="item2.title"
                    v-for="(item2, index2) in item.children"
                    :key="index2"
                    :width="item2.width"
                    show-overflow-tooltip
                  ></el-table-column>
                </el-table-column> -->
              <!-- <el-table-column
                  v-else
                  :prop="item.field"
                  :label="item.title"
                  :width="item.width"
                  show-overflow-tooltip
                >
                </el-table-column> -->

              <el-table-column
              v-if="
                  tabLabel == '成果台账' ||
                  tabLabel == '探放水工程量台账' ||
                  tabLabel == '水文钻孔排查台账' ||
                  tabLabel == '水文报告' ||
                  tabLabel == 'Q-S曲线'
                "
                prop="address"
                label="操作"
                :width="
                  tabLabel == '水文报告'?180:
                  tabLabel == 'Q-S曲线'
                    ? 120
                    : 50
                "
              >
                <template slot-scope="{ row }">
                  <el-button
                    v-if="tabLabel == '水文报告'"
                    type="text"
                    size="mini"
                    @click="handledownload(row)"
                    >下载</el-button
                  >
                  <el-button
                    v-if="tabLabel == '水文报告' || tabLabel == 'Q-S曲线'"
                    type="text"
                    size="mini"
                    @click="handleDetail(row)"
                    >查看</el-button
                  >
                  <el-button
                    v-if="tabLabel == '水文报告' || tabLabel == 'Q-S曲线'"
                    type="text"
                    size="mini"
                    @click="handleEdit(row)"
                    >编辑</el-button
                  >
                  <el-button
                    type="text"
                    size="mini"
                    @click="handleDelete(row)"
                    style="color: red"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <pagination
            :total="page.total"
            :page="page.currentPage"
            :limit="page.pageSize"
            @pagination="paginationFn"
          ></pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 新增/编辑 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="35%"
      :before-close="handleClose"
      custom-class="shadow-dialog"
    >
      <span slot="title" style="font-size: 16px">{{ title }}</span>
      <!-- 井上水文钻孔成果台账 -->
      <el-form
        v-if="tabLabel === '成果台账' && isShowTaizhang == '类别2'"
        :model="form"
        ref="form"
        :rules="rules"
        label-width="150px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="孔号" prop="code">
              <el-input
                size="small"
                v-model="form.code"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="孔深(m)" prop="depth">
              <el-input
                size="small"
                v-model="form.depth"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="隔水层岩性" prop="lithology">
              <el-input
                size="small"
                v-model="form.lithology"
                placeholder="请输入"
              ></el-input>
              <!-- <el-select
                size="small"
                v-model="form.pointCodes"
                placeholder="请选择"
                multiple
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="(item, index) in dianSelectData"
                  :key="index"
                ></el-option>
              </el-select> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="隔水层底板厚度(m)" prop="floorThickness">
              <el-input
                size="small"
                v-model="form.floorThickness"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="扰动破坏厚度(m)" prop="disturbanceThickness">
              <el-input
                size="small"
                v-model="form.disturbanceThickness"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="水头高度(m)" prop="waterHeadHeight">
              <el-input
                size="small"
                v-model="form.waterHeadHeight"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="隔水层承压力(Mpa)" prop="pressure">
              <el-input
                size="small"
                v-model="form.pressure"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="突水系数(Mpa/m)" prop="inrushRatio">
              <el-input
                size="small"
                v-model="form.inrushRatio"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 井下水文钻孔成果台账 -->
      <el-form
        v-if="tabLabel === '成果台账' && isShowTaizhang == '类别1'"
        :model="jingxiaForm"
        ref="form"
        label-width="150px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="孔号" prop="code">
              <el-input
                size="small"
                v-model="jingxiaForm.code"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="孔口坐标X" prop="x">
              <el-input
                size="small"
                v-model="jingxiaForm.x"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="孔口坐标Y" prop="y">
              <el-input
                size="small"
                v-model="jingxiaForm.y"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="孔口坐标Z" prop="z">
              <el-input
                size="small"
                v-model="jingxiaForm.z"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="钻孔方位" prop="azimuth">
              <el-input
                size="small"
                v-model="jingxiaForm.azimuth"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="钻孔倾角" prop="dipAngle">
              <el-input
                size="small"
                v-model="jingxiaForm.dipAngle"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开孔日期" prop="startTime">
              <el-input
                size="small"
                v-model="jingxiaForm.startTime"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="钻孔性质" prop="type">
              <el-input
                size="small"
                v-model="jingxiaForm.type"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="含水层名称" prop="waterLayerName">
              <el-input
                size="small"
                v-model="jingxiaForm.waterLayerName"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="孔深(m)" prop="finalDepth">
              <el-input
                size="small"
                v-model="jingxiaForm.finalDepth"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="层位" prop="finalLayer">
              <el-input
                size="small"
                v-model="jingxiaForm.finalLayer"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="钻孔结构" prop="holeStructure">
              <el-input
                size="small"
                v-model="jingxiaForm.holeStructure"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 水文报告 -->
      <el-form
        v-if="tabLabel === '水文报告'"
        :model="dizhibaogaoForm"
        ref="dizhibaogaoForm"
        :rules="dizhibaogaoRules"
        label-width="120px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="文档名称" prop="fileName">
              <el-input
                size="small"
                v-model="dizhibaogaoForm.fileName"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="编制单位" prop="compilationUnit">
              <el-input
                size="small"
                v-model="dizhibaogaoForm.compilationUnit"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="编制日期" prop="compilationDate">
              <el-date-picker
                style="width: 100%"
                size="small"
                v-model="dizhibaogaoForm.compilationDate"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上传时间" prop="sendTime">
              <el-date-picker
                style="width: 100%"
                size="small"
                v-model="dizhibaogaoForm.sendTime"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="文件标签" prop="fileTagId">
              <el-select
                @change="tagChangeSelect"
                style="width: 100%"
                size="small"
                v-model="dizhibaogaoForm.fileTagId"
              >
                <el-option
                  :label="tagitem.tag"
                  :value="tagitem.id"
                  v-for="(tagitem, tagindex) in fenleiAllData"
                  :key="tagindex"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="文件上传" prop="">
              <el-upload
                ref="upload"
                class="upload-demo"
                :action="uploadFileUrl"
                :before-upload="beforeUpload"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
                :headers="headers"
                :limit="1"
                :file-list="fileList"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip" style="color: #838fa0">
                  允许上传 "bmp", "gif", "jpg", "jpeg", "png", "doc", "docx",
                  "xls", "xlsx", "ppt", "pptx", "html", "htm", "txt", "rar",
                  "zip", "gz", "bz2", "mp4", "avi", "rmvb", "pdf",
                  "dwg","wps","bpmn","bar"文件，且不超过50m
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="描述" prop="remark">
              <el-input
                type="textarea"
                size="small"
                v-model="dizhibaogaoForm.remark"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- Q-S曲线 -->
      <el-form
        v-if="tabLabel === 'Q-S曲线'"
        :model="QSForm"
        ref="QSForm"
        :rules="QSRules"
        label-width="120px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="图表名称" prop="name">
              <el-input
                size="small"
                v-model="QSForm.name"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="钻孔编号" prop="drillHoleNumber">
              <el-input
                size="small"
                v-model="QSForm.drillHoleNumber"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="标签名称" prop="tag">
              <el-input
                size="small"
                v-model="QSForm.tag"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="配置信息" prop="config">
              <el-input
                size="small"
                v-model="QSForm.config"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="文件上传" prop="">
              <el-upload
                ref="uploadqs"
                class="upload-demo"
                :limit="1"
                :data="QSForm"
                :headers="headers"
                :action="uploadUrl"
                :on-change="beforeUpload2"
                :on-remove="handleRemove2"
                :on-success="handleSuccess2"
                :auto-upload="false"
                :file-list="fileList3"
              >
                <!-- +'?name='+QSForm.name+'&drillHoleNumber='+QSForm.drillHoleNumber+'&tag='+QSForm.tag -->
                <!-- +QSForm.id?'&id='+Number(QSForm.id):'' -->
                <!-- +'&id='+Number(QSForm.id)+'&data='+JSON.stringify(JSON.stringify(QSData)) -->
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip" style="color: #838fa0">
                  允许上传
                  "bmp", "gif", "jpg", "jpeg", "png", "doc", "docx",
                  "xls",  "ppt", "pptx", "html", "htm", "txt", "rar",
                  "zip", "gz", "bz2", "mp4", "avi", "rmvb", "pdf","dwg"文件，
                  且不超过50m
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          v-if="title == '编辑' && tabLabel === 'Q-S曲线' && QSData.length > 0"
        >
          <el-col :span="24" style="max-height: 300px; overflow-y: auto">
            <el-table :data="QSData">
              <el-table-column label="序号" type="index"> </el-table-column>
              <el-table-column prop="qt" label="  q-t"> </el-table-column>
              <el-table-column prop="st" label="s-t"> </el-table-column>
              <el-table-column prop="time" label="时间"> </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAdd">确 定</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 查看 -->
    <el-dialog
      :visible.sync="detaildialogVisible"
      width="50%"
      :before-close="detailhandleClose"
      custom-class="shadow-dialog"
    >
      <span slot="title" style="font-size: 16px">详情</span>
      <!-- 井上水文钻孔成果台账 -->
      <el-form
        v-if="tabLabel === '成果台账' && isShowTaizhang == '类别2'"
        label-width="150px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="孔号：" prop="code">
              {{ detailObject.code }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="孔深(m)：" prop="depth">
              {{ detailObject.depth }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="隔水层岩性：" prop="lithology">
              {{ detailObject.lithology }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="隔水层底板厚度(m)：" prop="floorThickness">
              {{ detailObject.floorThickness }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="扰动破坏厚度(m)：" prop="disturbanceThickness">
              {{ detailObject.disturbanceThickness }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="水头高度(m)：" prop="waterHeadHeight">
              {{ detailObject.waterHeadHeight }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="隔水层承压力(Mpa)：" prop="pressure">
              {{ detailObject.pressure }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="突水系数(Mpa/m)：" prop="inrushRatio">
              {{ detailObject.inrushRatio }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 水文报告 -->
      <el-form
        v-if="tabLabel === '水文报告'"
        :model="dizhibaogaoForm"
        label-width="120px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="文档名称：" prop="fileName">
              {{ detailObject.fileName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="编制单位：" prop="compilationUnit">
              {{ detailObject.compilationUnit }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="编制日期：" prop="compilationDate">
              {{ detailObject.compilationDate }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上传时间：" prop="sendTime">
              {{ detailObject.sendTime }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="文件url：" prop="fileUrl"
              >{{ detailObject.fileUrl }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="文件后缀：" prop="fileSuffix"
              >{{ detailObject.fileSuffix }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="描述：" prop="remark">
              {{ detailObject.remark }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- Q-S曲线 -->
      <el-form
        v-if="tabLabel === 'Q-S曲线'"
        :model="QSForm"
        label-width="120px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="图表名称" prop="name">
              {{ detailObject.name }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="钻孔编号" prop="drillHoleNumber">
              {{ detailObject.drillHoleNumber }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="标签名称" prop="tag">
              {{ detailObject.tag }}
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="配置信息" prop="config">
              <el-input
                size="small"
                v-model="QSForm.config"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row>
          <!-- <el-col>
            <el-form-item label="文件上传" prop="">
              <el-upload
                ref="uploadqs"
                class="upload-demo"
                :limit="1"
                accept=".xlsx,.xls"
              :headers="headers"
              :action="uploadUrl+'?name='+QSForm.name+'&drillHoleNumber='+QSForm.drillHoleNumber+
              '&tag='+QSForm.tag +QSForm.id?'&id='+Number(QSForm.id):''
             "
              :on-change="beforeUpload2"
                :on-remove="handleRemove2"
                :on-success="handleSuccess2"
              :auto-upload="false"
              :file-list="fileList3"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip" style="color: #c0c4cc">
                  允许上传"xls,xlsx",
                  且不超过50m
                </div>
              </el-upload>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row v-if="tabLabel === 'Q-S曲线' && QSData.length > 0">
          <el-col
            :span="24"
            style="
              max-height: 300px;
              width: 90%;
              margin-left: 50px;
              margin-bottom: 20px;
              overflow-y: auto;
            "
          >
            <el-table :data="QSData">
              <el-table-column label="序号" type="index"> </el-table-column>
              <el-table-column prop="qt" label="  q-t"> </el-table-column>
              <el-table-column prop="st" label="s-t"> </el-table-column>
              <el-table-column prop="time" label="时间"> </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-form>
      <el-form :label-width="tabLabel === '成果台账' ? '150px' : '120px'">
        <el-row>
          <el-col :span="12">
            <el-form-item label="创建人：" prop="">
              {{ detailObject.createBy }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间：" prop="">
              {{ detailObject.createTime }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="更新人：" prop="">
              {{ detailObject.updateBy }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="更新时间：" prop="">
              {{ detailObject.updateTime }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 分类管理 -->
    <el-dialog
      :visible.sync="fenleiFlag"
      width="50%"
      :before-close="fenleihandleClose"
      custom-class="shadow-dialog"
    >
      <span slot="title" style="font-size: 16px">分类管理</span>
      <div style="margin-bottom: 15px">
        <el-button size="small" @click="addFenleiFn" type="primary"
          >新建分类</el-button
        >
      </div>
      <div
        class="bottom"
        style="
          height: 600px;
          overflow-y: auto;
          background-color: #061f41 !important;
        "
      >
        <el-table
          :data="fenleiData"
          :cell-style="selectedCellStyle"
          style="width: 100%"
        >
          <el-table-column label="序号" type="index"> </el-table-column>
          <el-table-column prop="id" label="编号" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="tag" label="分类" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="{ row }">
              <el-button type="text" size="mini" @click="editFenleiFn(row)"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="mini"
                @click="deleteFenleiFn(row)"
                style="color: red"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        :total="page2.total"
        :page="page2.currentPage"
        :limit="page2.pageSize"
        @pagination="paginationFn2"
      ></pagination>
    </el-dialog>
    <!-- 新建分类管理名称 -->
    <el-dialog
      :visible.sync="fenlei2Flag"
      width="20%"
      :before-close="fenlei2handleClose"
      custom-class="shadow-dialog"
    >
      <span slot="title" style="font-size: 16px">{{ fenleiTitle }}</span>
      <el-form
        ref="feileiRef"
        :model="fenleiForm"
        :rules="fenleiRules"
        label-width="80px"
      >
        <el-form-item label="分类名称" prop="tag">
          <el-input
            size="small"
            v-model="fenleiForm.tag"
            placeholder="请输入分类名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="fenleiAdd">确 定</el-button>
        <el-button @click="fenlei2handleClose">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 表格设置 -->
    <el-dialog
      :visible.sync="tableSettingFlag"
      width="50%"
      :before-close="tableSettinghandleClose"
      custom-class="shadow-dialog"
    >
      <span slot="title" style="font-size: 16px">表格设置</span>
      <div style="height: 670px; overflow: auto; margin-bottom: 15px">
        <el-table
          height="650"
          :data="duojiHeaderTitle"
          :cell-style="selectedCellStyle"
          class="draggable-table"
          row-key="field"
        >
          <el-table-column label="拖动排序" align="center">
            <template slot-scope="{ row }">
              <img class="rowSortable" src="@/assets/images/排序.png" alt="" />
            </template>
          </el-table-column>
          <el-table-column
            label="列名"
            prop="title"
            align="center"
          ></el-table-column>
          <el-table-column label="是否显示" prop="show" align="center">
            <template slot-scope="{ row }">
              <el-switch
                v-model="row.show"
                active-text="是"
                inactive-text="否"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="列宽" prop="width">
            <template slot-scope="{ row }">
              <el-input
                v-model="row.width"
                size="small"
                placeholder="请输入列宽"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="tableSetSubmit">确 定</el-button>
        <el-button @click="tableSettinghandleClose">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 导入 -->
    <el-dialog
      :visible.sync="daoruFlag"
      width="50%"
      :before-close="daoruhandleClose"
      custom-class="shadow-dialog"
    >
      <span slot="title" style="font-size: 16px">导入</span>
      <div class="w100 h100" style="padding: 10px">
        <el-upload
          ref="upload"
          class="upload-demo"
          :action="baseurl + importUrl"
          :limit="1"
          :auto-upload="false"
          :headers="headers"
          :file-list="fileList2"
          :on-success="onsuccess"
        >
          <template #trigger>
            <el-button type="primary">选择文件</el-button>
          </template>
          <el-button
            style="margin-left: 10px"
            class="ml-3"
            type="success"
            @click="submitUpload"
          >
            上传
          </el-button>

          <template #tip>
            <div style="color: #fff; font-size: 14px; margin-top: 10px">
              提示：先导出模板，再在模板文件中修改导入数据，否则导入失败
            </div>
          </template>
        </el-upload>
      </div>

      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="tableSettinghandleClose">取 消</el-button>
        <el-button type="primary" @click="tableSetSubmit">确 定</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import pagination from "@/components/huazi/pagination.vue";
import axios from "@/utils/request";
import axios2 from "@/utils/request2";
import axios3 from "@/utils/request3";
import Sortable from "sortablejs";
import { getToken } from "@/utils/auth";
import { mapGetters } from "vuex";
import store from "@/store";
export default {
  components: {
    pagination,
  },
  data() {
    return {
      tableHeight: null,
      uploadFlag: false, //是否上传
      daoruFlag: false, //导入弹窗
      baseurl: process.env.VUE_APP_BASE_API,
      uploadUrl:
        process.env.VUE_APP_BASE_API +
        "/transgeology/hydrology/qsdata/importExcel",
      fileList3: [], //qs曲线文件列表
      file: {}, //qs曲线文件
      QSData: [], //Q-S曲线数据
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload",
      uploadFileUrl2: process.env.VUE_APP_BASE_API + "/common/upload",
      headers: { Authorization: "Bearer " + getToken() },
      fileList: [
        // { name: 'food.jpeg', url: 'http://example.com/food.jpeg' },
      ],
      fileList2: [], //导入上传文件列表
      //分类管理
      fenleiFlag: false,
      fenlei2Flag: false, //新增分类
      fenleiTitle: "新增",
      fenleiData: [], //分类数据
      fenleiAllData: [], //全部分类数据
      fenleiForm: {}, //分类新增数据
      fenleiRules: {
        tag: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
      },
      tableSettingFlag: false, //表格设置
      tabLabel: "成果台账",
      tabsData: [
        // {
        //   label: "井上水文钻孔成果台账",
        // },
        // {
        //   label: "井下水文钻孔成果台账",
        // },
        {
          label: "成果台账",
        },
        {
          label: "探放水工程量台账",
        },
        {
          label: "水文钻孔排查台账",
        },
        {
          label: "水文长观孔历史数据",
        },
        {
          label: "涌水量历史数据",
        },
        {
          label: "降雨量历史数据",
        },
        {
          label: "水质检测历史数据",
        },
        {
          label: "水文报告",
        },
        {
          label: "Q-S曲线",
        },
      ],
      title: "新增",
      dialogVisible: false, //新增/编辑弹层
      detaildialogVisible: false, //详情弹层
      detailObject: {}, //详情弹层数据
      isShowTaizhang: "类别1", //是否显示台账,类别1，类别2
      searchLabel: [
        {
          label: "类型",
          bindData: "类别1",
          options: [
            { label: "类别1", value: "类别1" },
            { label: "类别2", value: "类别2" },
          ],
        },
        { label: "孔号", bindData: "" },
      ], //搜索字段
      searchSelectData: [], //搜索下拉框数据
      form: {}, //井上水文钻孔成果台账
      rules: {
        code: [{ required: true, message: "请输入孔号", trigger: "blur" }],
        // depth: [{ required: true, message: "请输入孔深", trigger: "blur" }],
        // lithology: [
        //   { required: true, message: "请输入隔水层岩性", trigger: "blur" },
        // ],
        // floorThickness: [
        //   { required: true, message: "请输入隔水层底板厚度", trigger: "blur" },
        // ],
        // disturbanceThickness: [
        //   { required: true, message: "请输入扰动破坏厚度", trigger: "blur" },
        // ],
        // waterHeadHeight: [
        //   { required: true, message: "请输入水头高度", trigger: "blur" },
        // ],
        // pressure: [
        //   { required: true, message: "请输入隔水层承压力", trigger: "blur" },
        // ],
        // inrushRatio: [
        //   { required: true, message: "请输入突水系数", trigger: "blur" },
        // ],
      },
      jingxiaForm: {}, //井下水文钻孔成果台账
      dizhibaogaoForm: {}, //水文报告新增数据
      dizhibaogaoRules: {
        fileName: [
          { required: true, message: "请输入文档名称", trigger: "blur" },
        ],
        compilationUnit: [
          { required: true, message: "请输入编制单位", trigger: "blur" },
        ],
        compilationDate: [
          { required: true, message: "请选择编制日期", trigger: "change" },
        ],
        sendTime: [
          { required: true, message: "请选择上传时间", trigger: "change" },
        ],
      },
      QSForm: {}, //Q-S曲线新增数据
      QSRules: {
        name: [{ required: true, message: "请输入图表名称", trigger: "blur" }],
        // drillHoleNumber: [
        //   { required: true, message: "请输入钻孔编号", trigger: "blur" },
        // ],
        // tag: [{ required: true, message: "请输入标签名称", trigger: "blur" }],
        // config: [
        //   { required: true, message: "请选择配置信息", trigger: "change" },
        // ],
      },
      tableData: [], //表格数据
      headerData: [], //表头数据
      headerTitle: [], //表头名称
      duojiHeaderTitle: [], //表头名称
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      page2: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      mergeObj: {},
      mergeArr: [
        "workFaceName",
        "drillPlace",
        "startTime",
        "endTime",
        "totalLength",
      ], //合并字段
      multipleSelection: [], //多选
      headerZiduan: "t_hydrology_underground_result_account", //表头字段,默认第一个井上水文钻孔成果台账
      listUrl: "/transgeology/hydrology/undergroundresultaccount/list", //列表接口,默认第一个井上水文钻孔成果台账
      addUrl: "/transgeology/hydrology/undergroundresultaccount/add", //新增接口,默认第一个井上水文钻孔成果台账
      editUrl: "/transgeology/hydrology/undergroundresultaccount/edit", //编辑接口,默认第一个井上水文钻孔成果台账
      deleteUrl: "/transgeology/hydrology/undergroundresultaccount/", //删除接口,默认第一个井上水文钻孔成果台账
      detailUrl: "/transgeology/hydrology/undergroundresultaccount/", //详情接口,默认第一个井上水文钻孔成果台账
      downloadUrl:
        "/transgeology/hydrology/undergroundresultaccount/importTemplate", //下载模版接口,默认第一个井上水文钻孔成果台账
      importUrl: "/transgeology/hydrology/undergroundresultaccount/importExcel", //导入接口,默认第一个井上水文钻孔成果台账
      exportUrl: "/transgeology/hydrology/undergroundresultaccount/export", //导出接口,默认第一个井上水文钻孔成果台账
    };
  },
  methods: {
    handleSelectionChange(val) {
      //多选
      this.multipleSelection = val;
    },
    //下载模版
    downloadFn() {
      axios({
        url: this.downloadUrl,
        method: this.tabLabel == "Q-S曲线" ? "get" : "post",
        responseType: "blob",
      }).then((response) => {
        var fileURL = window.URL.createObjectURL(new Blob([response]));
        var fileLink = document.createElement("a");
        fileLink.href = fileURL;
        fileLink.setAttribute("download", `${this.tabLabel}(模版).xlsx`);
        document.body.appendChild(fileLink);
        fileLink.click();
      });
    },
    //导入
    importFn() {
      // axios.post(this.importUrl, {}).then((res) => {});
      this.daoruFlag = true;
    },
    daoruhandleClose() {
      this.daoruFlag = false;
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    // 文件上传成功时执行的函数
    onsuccess(res) {
      if (res.code === 200) {
        if (res.data !== null && res.data.includes("重复数据")) {
          this.$message.warning(res.data);
        } else {
          this.daoruFlag = false;
          this.getList();
          this.fileList2 = [];
          this.$message.success("导入成功");
        }
      } else {
        this.$message.error(res.msg);
      }
    },
    //导出
    exportFn(val) {
      let obj = {
        pageNum: this.page.currentPage,
        pageSize: this.page.pageSize,
      };
      if (val == "danqian") {
        obj = {
          pageNum: this.page.currentPage,
          pageSize: this.page.pageSize,
        };
      } else if (val == "quanbu") {
        obj = {
          // pageNum: 1,
          // pageSize: 10000,
        };
      }
      axios({
        url: this.exportUrl,
        method: "POST",
        responseType: "blob",
        data: obj,
        // params:{trainInfoSecondType: props.catalogId}
      }).then((response) => {
        var fileURL = window.URL.createObjectURL(new Blob([response]));
        var fileLink = document.createElement("a");
        fileLink.href = fileURL;
        fileLink.setAttribute(
          "download",
          val == "danqian"
            ? this.tabLabel + ".xlsx"
            : this.tabLabel + "(全部数据).xlsx"
        );
        document.body.appendChild(fileLink);
        fileLink.click();
      });
      // axios.post(this.listUrl, obj).then((res) => {
      //   if (res.data && res.data.list) {
      //     this.exportData = res.data.list;
      //     setTimeout(() => {
      //       /* 获取表格数据 */
      //       let xlsxParam = { raw: true }; //此行代码可解决导出时时间，身份证错乱问题
      //       const ws = XLSX.utils.table_to_sheet(
      //         document.getElementById("out-table"),
      //         xlsxParam
      //       );
      //       /* 新建工作簿并添加工作表 */
      //       const wb = XLSX.utils.book_new();
      //       XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
      //       /* 生成Excel文件 */
      //       const wbout = XLSX.write(wb, { bookType: "xlsx", type: "binary" });
      //       /* 字符串转ArrayBuffer */
      //       function s2ab(s) {
      //         const buf = new ArrayBuffer(s.length);
      //         const view = new Uint8Array(buf);
      //         for (let i = 0; i !== s.length; ++i)
      //           view[i] = s.charCodeAt(i) & 0xff;
      //         return buf;
      //       }
      //       /* 保存文件 */
      //       saveAs(
      //         new Blob([s2ab(wbout)], { type: "application/octet-stream" }),
      //         val == "danqian"
      //           ? this.tabLabel + ".xlsx"
      //           : this.tabLabel + "(全部数据).xlsx"
      //       );
      //     }, 1000);
      //   }
      // });
    },
    //表格设置
    tableSetFn() {
      //打开
      this.tableSettingFlag = true;
      this.$nextTick(() => {
        this.rowDrop();
      });
    },
    tableSettinghandleClose() {
      //关闭
      this.tableSetSubmit();
      this.tableSettingFlag = false;
    },
    tableSetSubmit() {
      //表格设置提交
      let arr = [];
      this.headerTitle.forEach((item, index) => {
        if (item.child) {
          item.child.forEach((item2, index2) => {
            arr.push(item2);
          });
        } else {
          arr.push(item);
        }
      });
      arr.forEach((item, index) => {
        item.sort = index;
      });
      axios
        .post("/vxeheaders/setHeaders", {
          headers: arr,
        })
        .then((res) => {
          this.getHeaderList();
          // this.getList();
          this.$message.success("设置成功");
          this.tableSettingFlag = false;
        });
    },
    rowDrop() {
      //行拖拽排序
      const tbody = document.querySelector(
        ".draggable-table .el-table__body-wrapper tbody"
      );
      new Sortable(tbody, {
        handle: ".rowSortable",
        animation: 150,
        onEnd: ({ newIndex, oldIndex }) => {
          let arr = [];
          this.$nextTick(() => {
            // this.headerTitle.splice(oldIndex, 1);
            // this.headerTitle.splice(newIndex, 0, targetRow);
            this.headerTitle.forEach((item, index) => {
              //转一级数组
              if (item.child) {
                item.child.forEach((item1) => {
                  arr.push(item1);
                });
              } else {
                arr.push(item);
              }
            });
            this.headerTitle = arr;
            const targetRow = this.headerTitle[oldIndex];
            this.headerTitle.splice(oldIndex, 1);
            this.headerTitle.splice(newIndex, 0, targetRow);
            let sortHeaders = [];
            // 遍历数据
            for (let i = 0; i < this.headerTitle.length; i++) {
              const item = this.headerTitle[i];

              // 没有分组，添加为一级表头
              if (item.groupName === null) {
                sortHeaders.push(item);
              }
              // 含分组信息
              else {
                // 如果分组结果不为空，且分组最后一个结果和当前同属一个一级表头，则添加到该一级表头下
                if (
                  sortHeaders.length > 0 &&
                  sortHeaders[sortHeaders.length - 1].title === item.groupName
                ) {
                  const child = sortHeaders[sortHeaders.length - 1].child;
                  child.push(item);
                } else {
                  const child = [item];
                  sortHeaders.push({ title: item.groupName, child: child });
                }
              }
            }
            this.headerTitle = sortHeaders;
          });
        },
      });
    },
    //分类管理
    tagChangeSelect() {
      //报告，文件标签下拉选择变化
      this.fenleiAllData.forEach((item) => {
        if (item.id == this.dizhibaogaoForm.fileTagId) {
          this.dizhibaogaoForm.fileTag = item.tag;
        }
      });
    },
    feileiFn() {
      //新建分类
      this.getFenleiList();
      this.fenleiFlag = true;
    },
    fenleihandleClose() {
      //新建分类关闭
      this.fenleiFlag = false;
    },
    fenlei2handleClose() {
      //新增关闭
      this.fenlei2Flag = false;
    },
    fenleiAdd() {
      //分类表单提交
      this.$refs.feileiRef.validate((valid) => {
        if (valid) {
          if (this.fenleiTitle == "新增") {
            axios
              .post("/geology/digital/filetag/add", {
                tag: this.fenleiForm.tag,
                fileType: 1, //文件类型,0=地质报告,1=水文报告,2=测量文档
              })
              .then((res) => {
                this.$message.success("新增成功");
                this.getFenleiList();
                this.fenlei2Flag = false;
                this.fenleiForm = {};
              });
          } else if (this.fenleiTitle == "编辑") {
            axios
              .post("/geology/digital/filetag/edit", {
                tag: this.fenleiForm.tag,
                id: this.fenleiForm.id,
                fileType: 1, //文件类型,0=地质报告,1=水文报告,2=测量文档
              })
              .then((res) => {
                this.$message.success("编辑成功");
                this.getFenleiList();
                this.fenlei2Flag = false;
                this.fenleiForm = {};
              });
          }
        } else {
          return false;
        }
      });
    },
    //新增分类
    addFenleiFn() {
      this.fenleiForm = {};
      this.fenleiTitle = "新增";
      this.fenlei2Flag = true;
    },
    //编辑分类
    editFenleiFn(row) {
      this.fenleiForm = row;
      this.fenleiTitle = "编辑";
      this.fenlei2Flag = true;
    },
    //删除分类
    deleteFenleiFn(row) {
      this.$confirm("是否删除该分类?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios.delete("/geology/digital/filetag/" + row.id).then((res) => {
            this.$message.success("删除成功");
            this.getFenleiList();
          });
        })
        .catch(() => {});
    },
    //获取分类管理数据
    getFenleiList() {
      axios
        .post("/geology/digital/filetag/list", {
          pageNum: this.page2.currentPage,
          pageSize: this.page2.pageSize,
          fileType: 1, //文件类型,0=地质报告,1=水文报告,2=测量文档
        })
        .then((res) => {
          if (res.data.list) {
            this.page2.total = res.data.total;
            this.fenleiData = res.data.list;
          }
        });
    },
    //成果台账，类型中类别改变
    typeChangeSelect(e) {
      if (this.tabLabel == "成果台账") {
        this.isShowTaizhang = e;
        if (e == "类别1") {
          this.headerZiduan = "t_hydrology_underground_result_account"; //表头字段,井下水文钻孔成果台账
          this.listUrl =
            "/transgeology/hydrology/undergroundresultaccount/list"; //列表接口,井下水文钻孔成果台账
          this.addUrl = "/transgeology/hydrology/undergroundresultaccount/add"; //新增接口,井下水文钻孔成果台账
          this.editUrl =
            "/transgeology/hydrology/undergroundresultaccount/edit"; //编辑接口,井下水文钻孔成果台账
          this.deleteUrl = "/transgeology/hydrology/undergroundresultaccount/"; //删除接口,井下水文钻孔成果台账
          this.detailUrl = "/transgeology/hydrology/undergroundresultaccount/"; //详情接口,井下水文钻孔成果台账
          this.downloadUrl =
            "/transgeology/hydrology/undergroundresultaccount/importTemplate"; //下载模版接口,井下水文钻孔成果台账
          this.importUrl =
            "/transgeology/hydrology/undergroundresultaccount/importExcel"; //导入接口,井下水文钻孔成果台账
          this.exportUrl =
            "/transgeology/hydrology/undergroundresultaccount/export"; //导出接口,井下水文钻孔成果台账
        } else if (e == "类别2") {
          this.headerZiduan = "t_hydrology_overground_result_account"; //表头字段,默认第一个井上水文钻孔成果台账
          this.listUrl = "/transgeology/hydrology/overgroundresultaccount/list"; //列表接口,默认第一个井上水文钻孔成果台账
          this.addUrl = "/transgeology/hydrology/overgroundresultaccount/add"; //新增接口,默认第一个井上水文钻孔成果台账
          this.editUrl = "/transgeology/hydrology/overgroundresultaccount/edit"; //编辑接口,默认第一个井上水文钻孔成果台账
          this.deleteUrl = "/transgeology/hydrology/overgroundresultaccount/"; //删除接口,默认第一个井上水文钻孔成果台账
          this.detailUrl = "/transgeology/hydrology/overgroundresultaccount/"; //详情接口,默认第一个井上水文钻孔成果台账
          this.downloadUrl =
            "/transgeology/hydrology/overgroundresultaccount/importTemplate"; //下载模版接口,默认第一个井上水文钻孔成果台账
          this.importUrl =
            "/transgeology/hydrology/overgroundresultaccount/importExcel"; //导入接口,默认第一个井上水文钻孔成果台账
          this.exportUrl =
            "/transgeology/hydrology/overgroundresultaccount/export"; //导出接口,默认第一个井上水文钻孔成果台账
        }
        this.getList();
      }
    },
    //地质报告文件上传
    beforeUpload(file) {
      const fileType = [
        "bmp",
        "gif",
        "jpg",
        "jpeg",
        "png",
        "doc",
        "docx",
        "xls",
        "xlsx",
        "ppt",
        "pptx",
        "html",
        "htm",
        "txt",
        "rar",
        "zip",
        "gz",
        "bz2",
        "mp4",
        "avi",
        "rmvb",
        "pdf",
        "dwg",
        "wps",
        "bpmn",
        "bar",
      ];
      if (file.type != "" || file.type != null || file.type != undefined) {
        //截取文件的后缀，判断文件类型
        const FileExt = file.name.replace(/.+\./, "").toLowerCase();
        //计算文件的大小
        const isLt5M = file.size / 1024 / 1024 < 50; //这里做文件大小限制
        // const isLt5M = file.size / 1024 < 500; //500kb
        //如果大于50M
        if (!isLt5M) {
          this.$message.error("上传文件大小超过50m");
          return false;
        }
        //如果文件类型不在允许上传的范围内
        if (fileType.includes(FileExt)) {
          return true;
        } else {
          this.$message.error("上传文件类型不正确");
          return false;
        }
      }
    },
    handleRemove(file) {
      this.fileList.splice(this.fileList.indexOf(file), 1);
      this.dizhibaogaoForm.fileSuffix = "";
      this.dizhibaogaoForm.fileUrl = "";
    },
    handleSuccess(data) {
      const FileExt = data.newFileName.replace(/.+\./, "").toLowerCase();
      this.dizhibaogaoForm.fileSuffix = "." + FileExt;
      this.dizhibaogaoForm.fileUrl = data.url;
    },
    //Q-S曲线文件上传
    beforeUpload2(file) {
      // this.QSData=[]
      this.uploadFlag = true;
      const fileType = [
        "xls",
        "xlsx",
        "bmp",
        "gif",
        "jpg",
        "jpeg",
        "png",
        "doc",
        "docx",
        "ppt",
        "pptx",
        "html",
        "htm",
        "txt",
        "rar",
        "zip",
        "gz",
        "bz2",
        "mp4",
        "avi",
        "rmvb",
        "pdf",
        "dwg",
      ];
      if (file.type != "" || file.type != null || file.type != undefined) {
        //截取文件的后缀，判断文件类型
        const FileExt = file.name.replace(/.+\./, "").toLowerCase();
        //计算文件的大小
        const isLt5M = file.size / 1024 / 1024 < 50; //这里做文件大小限制
        // const isLt5M = file.size / 1024 < 500; //500kb
        //如果大于50M
        if (!isLt5M) {
          this.$message.error("上传文件大小超过50m");
          return false;
        }
        //如果文件类型不在允许上传的范围内
        if (fileType.includes(FileExt)) {
          return true;
        } else {
          this.$message.error("上传文件类型不正确");
          return false;
        }
      }
    },
    handleRemove2(file) {
      this.uploadFlag = false;

      // this.fileList3.splice(this.fileList3.indexOf(file), 1);
    },
    handleSuccess2(data) {
      if (this.title == "新增") {
        this.$message.success("新增成功");
      } else if (this.title == "编辑") {
        this.$message.success("编辑成功");
      }
      this.uploadFlag = false;
      this.dialogVisible = false;
      this.getList();
    },
    handleClick(tab) {
      this.tabLabel = tab.label;
      this.page.currentPage = 1;
      this.page.pageSize = 10;
      if (this.tabLabel == "成果台账") {
        this.isShowTaizhang = "类别1";
        this.searchLabel = [
          {
            label: "类型",
            bindData: "类别1",
            options: [
              { label: "类别1", value: "类别1" },
              { label: "类别2", value: "类别2" },
            ],
          },
          { label: "孔号", bindData: "" },
        ]; //搜索字段
        if (this.searchLabel[0].bindData == "类别1") {
          this.headerZiduan = "t_hydrology_underground_result_account"; //表头字段,井下水文钻孔成果台账
          this.listUrl =
            "/transgeology/hydrology/undergroundresultaccount/list"; //列表接口,井下水文钻孔成果台账
          this.addUrl = "/transgeology/hydrology/undergroundresultaccount/add"; //新增接口,井下水文钻孔成果台账
          this.editUrl =
            "/transgeology/hydrology/undergroundresultaccount/edit"; //编辑接口,井下水文钻孔成果台账
          this.deleteUrl = "/transgeology/hydrology/undergroundresultaccount/"; //删除接口,井下水文钻孔成果台账
          this.detailUrl = "/transgeology/hydrology/undergroundresultaccount/"; //详情接口,井下水文钻孔成果台账
          this.downloadUrl =
            "/transgeology/hydrology/undergroundresultaccount/importTemplate"; //下载模版接口,井下水文钻孔成果台账
          this.importUrl =
            "/transgeology/hydrology/undergroundresultaccount/importExcel"; //导入接口,井下水文钻孔成果台账
          this.exportUrl =
            "/transgeology/hydrology/undergroundresultaccount/export"; //导出接口,井下水文钻孔成果台账
        } else if (this.searchLabel[0].bindData == "类别2") {
          this.headerZiduan = "t_hydrology_overground_result_account"; //表头字段,默认第一个井上水文钻孔成果台账
          this.listUrl = "/transgeology/hydrology/overgroundresultaccount/list"; //列表接口,默认第一个井上水文钻孔成果台账
          this.addUrl = "/transgeology/hydrology/overgroundresultaccount/add"; //新增接口,默认第一个井上水文钻孔成果台账
          this.editUrl = "/transgeology/hydrology/overgroundresultaccount/edit"; //编辑接口,默认第一个井上水文钻孔成果台账
          this.deleteUrl = "/transgeology/hydrology/overgroundresultaccount/"; //删除接口,默认第一个井上水文钻孔成果台账
          this.detailUrl = "/transgeology/hydrology/overgroundresultaccount/"; //详情接口,默认第一个井上水文钻孔成果台账
          this.downloadUrl =
            "/transgeology/hydrology/overgroundresultaccount/importTemplate"; //下载模版接口,默认第一个井上水文钻孔成果台账
          this.importUrl =
            "/transgeology/hydrology/overgroundresultaccount/importExcel"; //导入接口,默认第一个井上水文钻孔成果台账
          this.exportUrl =
            "/transgeology/hydrology/overgroundresultaccount/export"; //导出接口,默认第一个井上水文钻孔成果台账
        }
      } else if (this.tabLabel == "探放水工程量台账") {
        this.searchLabel = [{ label: "工作面名称", bindData: "" }]; //搜索字段，workFaceName
        this.headerZiduan = "t_hydrology_quantity_account"; //表头字段,探放水工程量台账
        this.listUrl = "/transgeology/hydrology/quantityaccount/list"; //列表接口,探放水工程量台账
        this.addUrl = "/transgeology/hydrology/quantityaccount/add"; //新增接口,探放水工程量台账
        this.editUrl = "/transgeology/hydrology/quantityaccount/edit"; //编辑接口,探放水工程量台账
        this.deleteUrl = "/transgeology/hydrology/quantityaccount/"; //删除接口,探放水工程量台账
        this.detailUrl = "/transgeology/hydrology/quantityaccount/"; //详情接口,探放水工程量台账
        this.downloadUrl =
          "/transgeology/hydrology/quantityaccount/importTemplate"; //下载模版接口,探放水工程量台账
        this.importUrl = "/transgeology/hydrology/quantityaccount/importExcel"; //导入接口,探放水工程量台账
        this.exportUrl = "/transgeology/hydrology/quantityaccount/export"; //导出接口,探放水工程量台账
      } else if (this.tabLabel == "水文钻孔排查台账") {
        this.searchLabel = [{ label: "孔号", bindData: "" }]; //搜索字段
        this.headerZiduan = "t_hydrology_check_account"; //表头字段,水文钻孔排查台账
        this.listUrl = "/transgeology/hydrology/checkaccount/list"; //列表接口,水文钻孔排查台账
        this.addUrl = "/transgeology/hydrology/checkaccount/add"; //新增接口,水文钻孔排查台账
        this.editUrl = "/transgeology/hydrology/checkaccount/edit"; //编辑接口,水文钻孔排查台账
        this.deleteUrl = "/transgeology/hydrology/checkaccount/"; //删除接口,水文钻孔排查台账
        this.detailUrl = "/transgeology/hydrology/checkaccount/"; //详情接口,水文钻孔排查台账
        this.downloadUrl =
          "/transgeology/hydrology/checkaccount/importTemplate"; //下载模版接口,水文钻孔排查台账
        this.importUrl = "/transgeology/hydrology/checkaccount/importExcel"; //导入接口,水文钻孔排查台账
        this.exportUrl = "/transgeology/hydrology/checkaccount/export"; //导出接口,水文钻孔排查台账
      } else if (this.tabLabel == "水文长观孔历史数据") {
        this.searchLabel = [
          {
            label: "报警方式",
            bindData: "",
            options: this.searchSelectData,
          },
          { label: "时间", type: "date", bindData: "" },
        ]; //搜索字段，alarmTypeName
        this.headerZiduan = "Hole_HistoryPoint"; //表头字段,水文长观孔历史数据
        // this.listUrl = "/his/hole/hisHoleHistoryPoint/list"; //列表接口,水文长观孔历史数据
        this.listUrl = "/shh-dw/his/hole/hisHoleHistoryPoint/list"; //列表接口,水文长观孔历史数据
      } else if (this.tabLabel == "涌水量历史数据") {
        this.searchLabel = [
          {
            label: "报警方式",
            bindData: "",
            options: this.searchSelectData,
          },
          { label: "时间", type: "date", bindData: "" },
        ]; //搜索字段，alarmTypeName
        this.headerZiduan = "Gushing_HistoryPoint"; //表头字段,涌水量历史数据
        // this.listUrl = "/his/gushing/hisGushingHistoryPoint/list"; //列表接口,涌水量历史数据
        this.listUrl = "/shh-dw/his/gushing/hisGushingHistoryPoint/list"; //列表接口,涌水量历史数据
      } else if (this.tabLabel == "降雨量历史数据") {
        this.searchLabel = [
          {
            label: "报警方式",
            bindData: "",
            options: this.searchSelectData,
          },
          { label: "时间", type: "date", bindData: "" },
        ]; //搜索字段，alarmTypeName
        this.headerZiduan = "Rain_HistoryPoint"; //表头字段,降雨量历史数据
        // this.listUrl = "/his/rain/hisRainHistoryPoint/list"; //列表接口,降雨量历史数据
        this.listUrl = "/shh-dw/his/rain/hisRainHistoryPoint/list"; //列表接口,降雨量历史数据
      } else if (this.tabLabel == "水质检测历史数据") {
        this.searchLabel = [
          {
            label: "报警方式",
            bindData: "",
            options: this.searchSelectData,
          },
          { label: "时间", type: "date", bindData: "" },
        ]; //搜索字段，alarmTypeName
        this.headerZiduan = "WaterQuality_HistoryPoint"; //表头字段,水质检测历史数据
        // this.listUrl = "/his/waterquality/hisWaterQualityHistoryPoint/list"; //列表接口,水质检测历史数据
        this.listUrl = "/shh-dw/his/waterquality/hisWaterQualityHistoryPoint/list"; //列表接口,水质检测历史数据
      } else if (this.tabLabel == "水文报告") {
        //单独接口最后处理
        this.searchLabel = [
          { label: "文档名称", bindData: "" },
          { label: "编制单位", bindData: "" },
        ]; //搜索字段
        this.headerZiduan = "geology_report";
        this.listUrl = "/geology/digital/fileManage/listFile";
        this.editUrl = "/geology/digital/fileManage/editFile";
        this.addUrl = "/geology/digital/fileManage/addFile";
        this.detailUrl = `/geology/digital/fileManage/getInfo/`;
        this.deleteUrl = `/geology/digital/fileManage/del/`;
        // this.importUrl = "/geology/digital/fileManage/importExcel";//导入接口
        // this.exportUrl = "/geology/digital/fileManage/export";//导出接口
        // this.downloadUrl = "/geology/digital/fileManage/importTemplate";//下载模版接口
      } else if (this.tabLabel == "Q-S曲线") {
        this.searchLabel = [{ label: "图表名称", bindData: "" }]; //搜索字段
        this.headerZiduan = "t_hydrology_basic_qs_data";
        this.listUrl = "/transgeology/hydrology/qsdata/list";
        this.editUrl = "/transgeology/hydrology/qsdata/importExcel"; //编辑用导入接口
        this.addUrl = "/transgeology/hydrology/qsdata/importExcel"; //新增用导入接口
        this.detailUrl = `/transgeology/hydrology/qsdata/`;
        this.deleteUrl = `/transgeology/hydrology/qsdata/`;
        // this.importUrl = "/transgeology/hydrology/qsdata/importExcel";//导入接口
        // this.exportUrl = "/geology/digital/fileManage/export";//导出接口
        this.downloadUrl = "/transgeology/hydrology/qsdata/importTemplate"; //下载模版接口
      }
      this.getHeaderList();
    },
    addFn() {
      //新增
      this.title = "新增";
      if (this.tabLabel == "成果台账") {
        if (this.searchLabel[0].bindData == "类别1") {
          this.jingxiaForm = {};
        } else if (this.searchLabel[0].bindData == "类别2") {
          this.form = {};
        }
      } else if (this.tabLabel == "水文报告") {
        axios
          .post("/geology/digital/filetag/listNoPage", {
            fileType: 1, //文件类型,0=地质报告,1=水文报告,2=测量文档
          })
          .then((res) => {
            this.fenleiAllData = res.data;
          });
        this.dizhibaogaoForm = {};
        this.fileList = [];
      } else if (this.tabLabel == "Q-S曲线") {
        this.QSForm = {};
        this.QSData = [];
        this.fileList3 = [];
        this.uploadFlag = false;
        // this.uploadUrl=this.baseurl+ "/transgeology/hydrology/qsdata/importExcel"
        //   +'?name='+this.QSForm.name+'&drillHoleNumber='+this.QSForm.drillHoleNumber+
        //       '&tag='+this.QSForm.tag+'&config='+this.QSForm.config
      }
      this.dialogVisible = true;
    },
    handleClose() {
      //关闭弹窗
      this.dialogVisible = false;
      this.$nextTick(() => {
        if (this.tabLabel == "成果台账") {
          if (this.searchLabel[0].bindData == "类别1") {
            this.$refs.jingxiaForm.resetFields();
          } else if (this.searchLabel[0].bindData == "类别2") {
            this.$refs.form.resetFields();
          }
        } else if (this.tabLabel == "地质报告") {
          // this.dizhibaogaoForm = this.detailObject;
          this.$refs.dizhibaogaoForm.resetFields();
          this.fileList = [];
        } else if (this.tabLabel == "Q-S曲线") {
          this.$refs.QSForm.resetFields();
          this.uploadFlag = false;
          this.QSData = [];
          this.fileList3 = [];
        }
      });
    },
    submitAdd() {
      //新增提交
      if (this.title == "新增") {
        if (this.tabLabel == "成果台账") {
          if (this.searchLabel[0].bindData == "类别1") {
            this.$refs.jingxiaForm.validate((valid) => {
              if (valid) {
                axios.post(this.addUrl, this.jingxiaForm).then((res) => {
                  this.$message.success("新增成功");
                  this.dialogVisible = false;
                  this.getList();
                });
              } else {
                return false;
              }
            });
          } else if (this.searchLabel[0].bindData == "类别2") {
            this.$refs.form.validate((valid) => {
              if (valid) {
                axios.post(this.addUrl, this.form).then((res) => {
                  this.$message.success("新增成功");
                  this.dialogVisible = false;
                  this.getList();
                });
              } else {
                return false;
              }
            });
          }
        } else if (this.tabLabel == "水文报告") {
          this.dizhibaogaoForm.fileType = 1; //0=地质报告,1=水文报告,2=测量文档
          // this.dizhibaogaoForm.fileSuffix='.jpg'
          // this.dizhibaogaoForm.fileUrl='url'
          this.$refs.dizhibaogaoForm.validate((valid) => {
            if (valid) {
              if (this.dizhibaogaoForm?.fileUrl) {
                axios.post(this.addUrl, this.dizhibaogaoForm).then((res) => {
                  this.$message.success("新增成功");
                  this.dialogVisible = false;
                  this.getList();
                });
              } else {
                this.$message.error("请上传文件");
              }
            } else {
              return false;
            }
          });
        } else if (this.tabLabel == "Q-S曲线") {
          // +'&data='+QSData?QSData:''+'&id='+QSForm.id?QSForm.id:''
          this.$refs.QSForm.validate((valid) => {
            if (valid) {
              if (this.uploadFlag) {
                this.$refs.uploadqs.submit();
              } else {
                this.$message.warning("请上传文件");
              }
            } else {
              return false;
            }
          });
        }
      } else if (this.title == "编辑") {
        if (this.tabLabel == "成果台账") {
          if (this.searchLabel[0].bindData == "类别1") {
            this.$refs.jingxiaForm.validate((valid) => {
              if (valid) {
                axios.post(this.editUrl, this.jingxiaForm).then((res) => {
                  this.$message.success("编辑成功");
                  this.dialogVisible = false;
                  this.getList();
                });
              }
            });
          } else if (this.searchLabel[0].bindData == "类别2") {
            this.$refs.form.validate((valid) => {
              if (valid) {
                axios.post(this.editUrl, this.form).then((res) => {
                  this.$message.success("编辑成功");
                  this.dialogVisible = false;
                  this.getList();
                });
              }
            });
          }
        } else if (this.tabLabel == "水文报告") {
          this.dizhibaogaoForm.fileType = 1; //0=地质报告,1=水文报告,2=测量文档
          this.$refs.dizhibaogaoForm.validate((valid) => {
            if (valid) {
              if (this.dizhibaogaoForm?.fileUrl != "") {
                axios.post(this.editUrl, this.dizhibaogaoForm).then((res) => {
                  this.$message.success("编辑成功");
                  this.dialogVisible = false;
                  this.getList();
                });
              } else {
                this.$message.error("请上传文件");
              }
            } else {
              return false;
            }
          });
        } else if (this.tabLabel == "Q-S曲线") {
          this.$refs.QSForm.validate((valid) => {
            if (valid) {
              if (this.uploadFlag) {
                this.$refs.uploadqs.submit();
              } else {
                let val =
                  '"[{"qt":"1","st":"2","time":"2024-08-13 10:27:00"}]"'; //JSON.stringify(JSON.stringify(this.QSData))
                axios2
                  .post(
                    this.baseurl +
                      "/transgeology/hydrology/qsdata/importExcel" +
                      "?name=" +
                      this.QSForm.name +
                      "&drillHoleNumber=" +
                      this.QSForm.drillHoleNumber +
                      "&tag=" +
                      this.QSForm.tag +
                      "&id=" +
                      Number(this.QSForm.id)
                  )
                  .then((res) => {
                    this.$message.success("编辑成功");
                    this.uploadFlag = false;
                    this.dialogVisible = false;
                    this.getList();
                  });
              }
            } else {
              return false;
            }
          });
        }
      }
    },
    //     upload(res,url,params={}){
    // var formData=new FormData();
    // formData.append("file",res);
    // for(var i in params){
    //   formData.append(i,params[i]);
    // }
    // axios2({
    //   url:this.baseurl+url,
    //   method:"post",
    //   data:formData,
    //   cache:false,//上传文件不需要缓存
    //   processData:false,
    //   contentType:false,
    //   success:function(data){
    //     this.$message.success("上传成功");
    //     this.dialogVisible = false;
    //     this.getList();
    //   }
    // })
    //     },
    handledownload(row) {
      console.log(row, "row");
      let str =
        (row.fileUrl?.split("/").slice(-1) + "").split("_")[0] + row.fileSuffix; //文件名
      let index = row.fileUrl.indexOf("/profile");
      let url = row.fileUrl.slice(index);
      axios({
        url: `/common/download/resource?resource=${url}`,
        method: "get",
        responseType: "blob",
      }).then((response) => {
        var fileURL = window.URL.createObjectURL(new Blob([response]));
        var fileLink = document.createElement("a");
        fileLink.href = fileURL; //fileLink.setAttribute("download", '模板.xlsx');
        fileLink.setAttribute("download", str);
        document.body.appendChild(fileLink);
        fileLink.click();
      });

      // fetch(row.fileUrl)
      //   .then((res) => res.blob())
      //   .then((blob) => {
      //     // 创建一个临时的URL对象
      //     const url = URL.createObjectURL(blob);
      //     // 创建一个隐藏的<a>标签，并设置其href属性为临时URL
      //     const a = document.createElement("a");
      //     a.href = url;
      //     a.download = str; // 设置下载的文件名
      //     a.style.display = "none";
      //     // 将<a>标签添加到文档中，并模拟点击下载
      //     document.body.appendChild(a);
      //     a.click();
      //     // 下载完成后，移除<a>标签和临时URL对象
      //     document.body.removeChild(a);
      //     URL.revokeObjectURL(url);
      //   });
    },
    handleDetail(row) {
      //查看
      axios.get(this.detailUrl + row.id).then((res) => {
        if (res.data) {
          this.detailObject = res.data;
          if (this.tabLabel == "Q-S曲线") {
            this.QSData = JSON.parse(res.data.data);
          }
          this.detaildialogVisible = true;
        }
      });
    },
    //查看关闭
    detailhandleClose() {
      this.detaildialogVisible = false;
      this.detailObject = {};
    },
    handleEdit(row) {
      //编辑
      this.title = "编辑";
      axios.get(this.detailUrl + row.id).then((res) => {
        if (res.data) {
          if (this.tabLabel == "成果台账") {
            if (this.searchLabel[0].bindData == "类别1") {
              this.jingxiaForm = res.data;
            } else if (this.searchLabel[0].bindData == "类别2") {
              this.form = res.data;
            }
          } else if (this.tabLabel == "水文报告") {
            axios
              .post("/geology/digital/filetag/listNoPage", {
                fileType: 1, //文件类型,0=地质报告,1=水文报告,2=测量文档
              })
              .then((res) => {
                this.fenleiAllData = res.data;
              });
            this.dizhibaogaoForm = res.data;
            let str =
              (res.data.fileUrl?.split("/").slice(-1) + "").split("_")[0] +
              res.data.fileSuffix;
            this.fileList = [{ name: str, url: res.data.fileUrl }];
          } else if (this.tabLabel == "Q-S曲线") {
            this.fileList3 = [];
            this.uploadFlag = false;
            this.QSForm = res.data;
            delete this.QSForm.createBy;
            delete this.QSForm.createTime;
            delete this.QSForm.updateBy;
            delete this.QSForm.updateTime;
            this.QSData = JSON.parse(res.data.data);
          }
        }
        this.dialogVisible = true;
      });
    },
    delAllFn() {
      //批量删除
      if (this.multipleSelection.length > 0) {
        let arr = [];
        this.multipleSelection.forEach((item, index) => {
          arr.push(item.id);
        });
        let str = arr.join(",");
        this.$confirm("确认批量删除数据?", "提示")
          .then(() => {
            axios.delete(this.deleteUrl + arr).then((res) => {
              this.$message.success("删除成功");
              this.getList();
            });
          })
          .catch(() => {});
      } else {
        this.$message.warning("请选择要删除的数据");
      }
    },
    handleDelete(row) {
      //删除
      this.$confirm("确认删除该条数据?", "提示")
        .then(() => {
          axios.delete(this.deleteUrl + row.id).then((res) => {
            this.$message.success("删除成功");
            this.getList();
          });
        })
        .catch(() => {});
    },
    onSubmit() {
      //查询
      this.page.currentPage = 1;
      this.page.pageSize=10
      this.getList();
    },
    onReset() {
      //重置
      if (this.tabLabel == "成果台账") {
        this.searchLabel.forEach((item) => {
          if (!item.options) {
            item.bindData = "";
          }
        });
      } else {
        this.searchLabel.forEach((item) => {
          item.bindData = "";
        });
      }
    },
    getHeaderList() {
      axios.get("/vxeheaders/getHeaders").then((res) => {
        this.headerData = res.data;
        this.getList();
      });
    },
    getList() {
      let obj = {
        pageNum: this.page.currentPage,
        pageSize: this.page.pageSize,
      };
      if (this.tabLabel == "水文报告") {
        obj.fileType = 1; //文件分类,0=地质报告,1=水文报告,2=测量文档
      }
      if (this.tabLabel == "成果台账") {
        if (this.searchLabel[1]?.bindData) {
          obj.code = this.searchLabel[1].bindData;
        } else {
          obj.pageNum = this.page.currentPage;
          obj.pageSize = this.page.pageSize;
        }
      } else {
        // if (this.searchLabel[0]?.bindData || this.searchLabel[1]?.bindData) {
          if (this.tabLabel == "探放水工程量台账") {
            obj.workFaceName = this.searchLabel[0]?.bindData;
          } else if (
            this.tabLabel == "成果台账" ||
            this.tabLabel == "水文钻孔排查台账"
          ) {
            obj.code = this.searchLabel[0].bindData;
          } 
          // else if (
          //   this.tabLabel == "水文长观孔历史数据" ||
          //   this.tabLabel == "涌水量历史数据" ||
          //   this.tabLabel == "降雨量历史数据" ||
          //   this.tabLabel == "水质检测历史数据"
          // ) {
          //   obj.alarmTypeId = this.searchLabel[0].bindData;
          //   obj.queryStartTime = this.searchLabel[1].bindData[0];
          //   obj.queryEndTime = this.searchLabel[1].bindData[1];
          // }
           else if (this.tabLabel == "水文报告") {
            obj.fileName = this.searchLabel[0].bindData;
            obj.compilationUnit = this.searchLabel[1].bindData;
          } else if (this.tabLabel == "Q-S曲线") {
            obj.name = this.searchLabel[0].bindData;
          } 
          else {
            //历史数据
            obj.alarmTypeId = this.searchLabel[0].bindData;
            obj.queryStartTime = this.searchLabel[1].bindData[0];
            obj.queryEndTime = this.searchLabel[1].bindData[1];
          }
        // } else {
        //   obj.pageNum = this.page.currentPage;
        //   obj.pageSize = this.page.pageSize;
        // }
      }
      let arr = [];
      this.headerData.forEach((item) => {
        if (item.name == this.headerZiduan) {
          this.tableData = [];
          this.currentPage = 1;
          this.pageSize = 10;
          arr.push(item);
        }
      });
      this.duojiHeaderTitle = arr; //此数据用于表格设置
      //多级表头数据处理
      // 初始化结果数组
      let sortHeaders = [];
      // 遍历数据
      for (let i = 0; i < arr.length; i++) {
        const item = arr[i];

        // 没有分组，添加为一级表头
        if (item.groupName === null) {
          sortHeaders.push(item);
        }
        // 含分组信息
        else {
          // 如果分组结果不为空，且分组最后一个结果和当前同属一个一级表头，则添加到该一级表头下
          if (
            sortHeaders.length > 0 &&
            sortHeaders[sortHeaders.length - 1].title === item.groupName
          ) {
            const child = sortHeaders[sortHeaders.length - 1].child;
            child.push(item);
          } else {
            const child = [item];
            sortHeaders.push({ title: item.groupName, child: child });
          }
        }
      }
      this.headerTitle = sortHeaders;
      if(this.tabLabel=='水文长观孔历史数据'||this.tabLabel=='涌水量历史数据'||this.tabLabel=='降雨量历史数据'||this.tabLabel=='水质检测历史数据'){
        axios3.post(this.listUrl, obj).then((res) => {
        this.page.total = Number(res.data.total);
        this.tableData = res.data.list;
        if (this.tabLabel == "探放水工程量台账") {
          this.getSpanArr(this.tableData);
        }
      });
      }else{
        axios.post(this.listUrl, obj).then((res) => {
        this.page.total = res.data.total;
        this.tableData = res.data.list;
        if (this.tabLabel == "探放水工程量台账") {
          this.getSpanArr(this.tableData);
        }
      });
      }
      

    },
    getSpanArr(data) {
      this.mergeArr.forEach((key, index1) => {
        let count = 0; // 用来记录需要合并行的起始位置
        this.mergeObj[key] = []; // 记录每一列的合并信息
        data.forEach((item, index) => {
          // index == 0表示数据为第一行，直接 push 一个 1
          if (index === 0) {
            this.mergeObj[key].push(1);
          } else {
            // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
            if (item[key] === data[index - 1][key]) {
              this.mergeObj[key][count] += 1;
              this.mergeObj[key].push(0);
            } else {
              // 如果当前行和上一行其值不相等
              count = index; // 记录当前位置
              this.mergeObj[key].push(1); // 重新push 一个 1
            }
          }
        });
      });
      console.log(this.mergeObj, "this.mergeObj");
    },
    mergeHeader({ row, column, rowIndex, columnIndex }) {
      // 默认接受四个值 { 当前行的值, 当前列的值, 行的下标, 列的下标 }
      if (this.tabLabel == "探放水工程量台账") {
        // 判断列的属性
        if (this.mergeArr.indexOf(column.property) !== -1) {
          // 判断其值是不是为0
          if (this.mergeObj[column.property][rowIndex]) {
            return [this.mergeObj[column.property][rowIndex], 1];
          } else {
            // 如果为0则为需要合并的行
            return [0, 0];
          }
        }
      }
    },
    paginationFn(e) {
      this.page.currentPage = e.page;
      this.page.pageSize = e.limit;
      this.getList();
      setTimeout(() => {
        if (e.limit == 10) {
          this.tableHeight = 550;
        }
        if (this.tableData.length < 10) {
          this.tableHeight = null;
        }
      }, 500);
    },
    paginationFn2(e) {
      this.page2.currentPage = e.page;
      this.page2.pageSize = e.limit;
      this.getFenleiList();
    },
    selectedCellStyle({ column, columnIndex, row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return {
          color: "rgba(255, 255, 255, 0.5)",
          "background-color": "#061F41",
        };
      } else {
        return {
          color: "rgba(255, 255, 255, 0.5)",
          "background-color": "#0B2C54",
        };
      }
    },
    selectList() {
      axios
        .post("basic/combobox/list", {
          condition: ["alarmType"],
        })
        .then((res) => {
          if (res.data) {
            this.searchSelectData = res.data.alarmType.map((item) => {
              return { label: item.name, value: Number(item.code) };
            });
          }
        });
    },
  },
  created() {
    this.getHeaderList();
    this.selectList();
  },
  mounted() {
    // this.getSpanArr(this.tableData);
  },
  computed: {
    ...mapGetters(["successFlag"]),
    tableHeaderShow() {
      let arr = [];
      this.headerTitle.forEach((item) => {
        if (item?.child) {
          item.child.forEach((item1) => {
            if (item1.show == 1) {
              if (
                arr.length > 0 &&
                arr[arr.length - 1].title === item1.groupName
              ) {
                const child = arr[arr.length - 1].child;
                child.push(item1);
              } else {
                const child = [item1];
                arr.push({ title: item.title, child: child });
              }
            }
          });
        } else {
          if (item.show == 1) {
            arr.push(item);
          }
        }
      });
      return arr;
    },
  },
  watch: {
    successFlag: {
      handler(newVal, oldVal) {
        if (newVal == true) {
          setTimeout(() => {
            this.getList();
            store.dispatch("LoginSuccess", false);
          }, 1000);
        }
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/assets/styles/dateSelect.scss";
.tableContainer {
  width: 100%;
  height: 690px;
  overflow: auto;
  .bottom {
    height: 560px;
    overflow-y: auto;
    background-color: #061f41 !important;
  }
}
::v-deep .el-table {
  background-color: #061f41 !important;
}
::v-deep .el-table__row > td {
  border: 1px solid #384c67 !important;
}
::v-deep .el-table::before {
  border: 1px solid #384c67 !important;
}
::v-deep .el-table__cell,
::v-deep .is-leaf {
  border: 1px solid #384c67 !important;
}
::v-deep .is-leaf {
  .cell {
    color: #fff !important;
  }
}
::v-deep .el-table__cell {
  color: rgba(255, 255, 255, 0.5);
  background-color: #061f41;
}
::v-deep .el-table__empty-block {
  border-left: 1px solid #384c67 !important;
  border-right: 1px solid #384c67 !important;
}
::v-deep .is-group {
  tr {
    th {
      border: 1px solid #384c67 !important;
      .cell {
        color: rgba(255, 255, 255, 0.8) !important;
      }
    }
  }
}
::v-deep .has-gutter {
  tr {
    th {
      border: 1px solid #384c67 !important;
      .cell {
        // color: rgba(255, 255, 255, 0.5) !important;
      }
    }
  }
}
::v-deep .el-range-editor--small .el-range-input {
  background-color: transparent;
  color: #fff !important;
}

::v-deep .el-input__inner {
  background-color: transparent !important;
  color: #fff !important;
  border: 1px solid #384c67 !important;
}

::v-deep .el-range-editor--medium {
  background-color: #061f41 !important;
  border: 1px solid #384c67 !important;
}
::v-deep .el-range-separator {
  color: #dee1e6 !important;
}
::v-deep .el-range-input {
  background-color: #061f41 !important;
  color: #dee1dc !important;
}

// ::v-deep
//   .el-table--enable-row-hover
//   .el-table__body
//   tr:hover
//   > td.el-table__cell {
//   background-color: transparent !important;
//   color: #000 !important;
// }
::v-deep .el-table--group,
.el-table--border {
  //多级表头边框线
  border: none !important;
}
::v-deep .el-table--group::after,
.el-table--border::after {
  //多级表头右侧边框线
  width: 0;
}
// ::v-deep .el-table::before{
//   color: #384c67 !important;
//   border: 1px solid #384c67 !important;
// }
/* 兼容Firefox */
// ::v-deep .el-table__body-wrapper {
//   scrollbar-width: thin; /* 设置滚动条宽度为细 */
//   scrollbar-color: #1890ff #f0f0f0; /* 设置滚动条颜色 */
// }
// ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
//   border-radius: 3px;
//   background: #1890ff !important; /* 修改滚动条颜色 */
// }
/*chrome滚动条颜色设置，纵向滚动条*/
*::-webkit-scrollbar {
  width: 5px;
  height: 10px;
  background-color: transparent;
} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
*::-webkit-scrollbar-track {
  background-color: #f0f6ff;
} /*定义滚动条轨道 内阴影+圆角*/
*::-webkit-scrollbar-thumb {
  background-color: #1890ff;
  border-radius: 6px;
} /*定义滑块 内阴影+圆角*/
.scrollbarHide::-webkit-scrollbar {
  display: none;
}
.scrollbarShow::-webkit-scrollbar {
  display: block;
}
.el-table::before{
  border: none !important;
}
</style>
<style lang="scss">
// .el-table__body-wrapper::-webkit-scrollbar-thumb {
//   border-radius: 3px;
//   background: #1890ff; /* 修改滚动条颜色 */
// }
/*chrome滚动条颜色设置，纵向滚动条*/
*::-webkit-scrollbar {
  width: 5px;
  // height: 10px;
  // background-color: transparent;
} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
*::-webkit-scrollbar-track {
  background-color: #f0f6ff;
} /*定义滚动条轨道 内阴影+圆角*/
*::-webkit-scrollbar-thumb {
  background-color: #1890ff;
  border-radius: 6px;
} /*定义滑块 内阴影+圆角*/
.scrollbarHide::-webkit-scrollbar {
  display: none;
}
.scrollbarShow::-webkit-scrollbar {
  display: block;
}
.el-select-dropdown__list {
  padding: 0 !important;
}
.shadow-dialog{
  box-shadow: 0px 0px 8.45px 4.23px rgba(62, 137, 222, 0.6);
}
</style>
